<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .main{
        width: 100%;
        height: 900px;
        display: flex;
        justify-content: space-between;
    }
    .main_left{
        width: 70%;
        background: #000;
        text-align: center;
    }
    .main_right{
        width: 30%;

    }
    .boxCanvas{
        background: blueviolet
    }
    #c1{
        background: #fff;

    }
    </style>
</head>
<body>
    <div class="main">
        <div class="main_left">
            <canvas id="c1"  width="900" height="900"></canvas>
        </div>
        <div class="main_right">
                宽<input type="text" id="btnW" value="100">
            高<input type="text" id="btnH" value="100">
<br>
            <button id="btn1">生成矩形</button>
            <div class="boxCanvas" id="boxCanvas"></div>
        </div>
    </div>
</body>
<script>
    let oc=document.getElementById('c1');
    let btn1=document.getElementById('btn1');
    let btnW=document.getElementById('btnW');
    let btnH=document.getElementById('btnH');
    let boxCanvas=document.getElementById('boxCanvas');
    let gb=oc.getContext('2d');
    let boxW='';
    let boxH='';
    let target='';
    let boxArr=[];
    let startXL='';
    let startXR='';
    let startYL='';
    let startYR='';
    let startI='';
    btn1.onclick=()=>{
        console.log(btnW.value,btnH.value)
        boxW=btnW.value;
        boxH=btnH.value;
        boxCanvas.style.width=boxW+'px';
        boxCanvas.style.height=boxH+'px';
    }
    document.addEventListener('dragstart',function(e){
         target=e.target;
        console.log(e,'dragstart',target,boxCanvas)

        boxArr.map((eM,eI)=>{
                        if((eM.offsetX-eM.w)<e.offsetX&&e.offsetX<(eM.offsetX+eM.w)){
                            if((eM.offsetY-eM.h)<e.offsetY&&e.offsetY<(eM.offsetY+eM.h)){
                                startXL=eM.offsetX;
                                startXR=eM.offsetX+eM.w;
                                startYL=eM.offsetY+(eM.h/2);
                                startYR=eM.offsetY+(eM.h/2);
                                startI=eI;
                                console.log("选择框内")
                            }
                        }
                    })
        },false)
        
    oc.addEventListener('dragenter',function(e){
        console.log(e,'dragenter')
        },false)
        oc.addEventListener('dragleave',function(e){
            console.log(e,'dragleave')
        },false)
        oc.addEventListener('dragover',function(ev){
            // console.log(ev,'ondragover')
            ev.preventDefault();
        },false)
        oc.addEventListener('drop',function(ev){
            console.log(ev,'drop')
            if(target==boxCanvas){
                gb.fillStyle='blueviolet';
            gb.fillRect(ev.offsetX,ev.offsetY,boxW,boxH);

            gb.stroke();
            target='';
            startXL='';
            startXR='';
            startYL='';
            startYR='';
            startI='';
            boxArr.push({offsetX:ev.offsetX,offsetY:ev.offsetY,w:boxW-0,h:boxH-0});
            }else if(target==oc){
                    // console.log(ev.offsetX,ev.offsetY,startX,startY);
                    boxArr.map((e,i)=>{
                        if((e.offsetX-e.w)<ev.offsetX&&ev.offsetX<(e.offsetX+e.w)){
                            if((e.offsetY-e.h)<ev.offsetY&&ev.offsetY<(e.offsetY+e.h)){
                                if(startI!=i){
                                    // console.log(startX-e.offsetX)
                                    let left=startXL-e.offsetX;//向左滑动
                                   
                                    if(left>0){
                                        gb.moveTo(startXL,startYL);
                                        gb.lineTo(e.offsetX+e.w,e.offsetY+(e.h/2));
                                    }else{
                                        gb.moveTo(startXR,startYR);
                                        gb.lineTo(e.offsetX,e.offsetY+(e.h/2));
                                    }
                                    
                                    gb.stroke();
                                }
                                
                            }
                        }
                        
                    })
                    
            }

   
            ev.preventDefault();
        },false)
</script>
</html>